<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success">
      <el-step title="待支付"></el-step>
      <el-step title="待配货"></el-step>
      <el-step title="已配货"></el-step>
      <el-step title="待验货"></el-step>
      <el-step title="已验货"></el-step>
      <el-step title="待装货"></el-step>
      <el-step title="已装货"></el-step>
      <el-step title="待发货"></el-step>
      <el-step title="已发货"></el-step>
      <el-step title="待交货"></el-step>
      <el-step title="已交货"></el-step>
    </el-steps>
    <el-button  type="warning" @click="quit">退出</el-button>
    <div v-show="active == 0">
      <el-button style="margin-top: 12px;" type="success" @click="nextTwo">已完成支付</el-button>
      <div>
        <div style="display: inline-block">
          <div>采购单号:{{ inorderlistOne.orderCode }}</div>
          <div>客户信息:{{ inorderlistOne.trueName }} {{ inorderlistOne.tel }}</div>
          <div>送货地址:{{ inorderlistOne.address }}</div>
          <div>物流人员: 未分配</div>
        </div>
      </div>
      <div>
        <div >
          共<span class="bai">{{ inordergoodslistList.length }}</span>件商品 合计:<span class="yu">{{ inorderlistOne.amount }}</span>
        </div>
        <el-table v-loading="loading" :data="inordergoodslistList">
          <el-table-column label="订单编号" align="center" prop="orderCode"/>
          <el-table-column label="商品名称" align="center" prop="goodsName"/>
          <el-table-column label="商品数量" align="center" prop="buyNum"/>
          <el-table-column label="单价" align="center" prop="price"/>
          <el-table-column label="总价" align="center">
            <template slot-scope="props">
              {{ props.row.buyNum * props.row.price }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>商品合计:{{ inorderlistOne.amount }}</div>
      <div>物流费用:{{ inorderlistOne.deliveryFee }}</div>
      <div>应付款:{{ inorderlistOne.amount + inorderlistOne.deliveryFee }}</div>
      <div>
      </div>
    </div>


    <div v-show="active == 1">
      <el-button @click="StartStocking" type="success">开始配货</el-button>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品数量" align="center" prop="num2"/>
        <el-table-column label="单价" align="center" prop="price"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="props">
            {{ props.row.num2 * props.row.price }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="active == 3">
      <el-button @click="Startcheck" type="success">开始验收</el-button>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品数量" align="center" prop="num2"/>
        <el-table-column label="单价" align="center" prop="price"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="props">
            {{ props.row.num2 * props.row.price }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="active == 5">
      <el-button @click="Startloading" type="success">开始装货</el-button>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品数量" align="center" prop="num2"/>
        <el-table-column label="单价" align="center" prop="price"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="props">
            {{ props.row.num2 * props.row.price }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="active == 7">
      <el-button @click="Startshipment" type="success">开始发货</el-button>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品数量" align="center" prop="num2"/>
        <el-table-column label="单价" align="center" prop="price"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="props">
            {{ props.row.num2 * props.row.price }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="active == 9">
      <el-button @click="Startdeliver" type="success">开始交货</el-button>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品数量" align="center" prop="num2"/>
        <el-table-column label="单价" align="center" prop="price"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="props">
            {{ props.row.num2 * props.row.price }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="active == 11">
      <div>
        <div style="display: inline-block">
          订单已完成
          <div>采购单号:{{ inorderlistOne.orderCode }}</div>
          <div>客户信息:{{ inorderlistOne.trueName }} {{ inorderlistOne.tel }}</div>
          <div>送货地址:{{ inorderlistOne.address }}</div>
          <div>物流人员: 未分配</div>
        </div>
      </div>
      <div>
        <div>
          共{{ inordergoodslistList.length }}件商品 合计:{{ inorderlistOne.amount }}
        </div>
        <el-table v-loading="loading" :data="inordergoodslistList">
          <el-table-column label="订单编号" align="center" prop="orderCode"/>
          <el-table-column label="商品名称" align="center" prop="goodsName"/>
          <el-table-column label="商品数量" align="center" prop="buyNum"/>
          <el-table-column label="单价" align="center" prop="price"/>
          <el-table-column label="总价" align="center">
            <template slot-scope="props">
              {{ props.row.buyNum * props.row.price }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>商品合计:{{ inorderlistOne.amount }}</div>
      <div>物流费用:{{ inorderlistOne.deliveryFee }}</div>
      <div>应付款:{{ inorderlistOne.amount + inorderlistOne.deliveryFee }}</div>
      <div>
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="open1" width="80%" append-to-body>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品规格" align="center" prop="specificationName"/>
        <el-table-column label="配货数量" align="center" prop="num2"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="scope">
            {{ scope.row.num2 * scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.buyNum" :min="1" :max="scope.row.num"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open2" width="80%" append-to-body>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品规格" align="center" prop="specificationName"/>
        <el-table-column label="验货数量" align="center" prop="num2"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="scope">
            {{ scope.row.num2 * scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.buyNum" :min="1" :max="scope.row.num"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open3" width="80%" append-to-body>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品规格" align="center" prop="specificationName"/>
        <el-table-column label="装货数量" align="center" prop="num2"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="scope">
            {{ scope.row.num2 * scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.buyNum" :min="1" :max="scope.row.num"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm3">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open4" width="80%" append-to-body>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品规格" align="center" prop="specificationName"/>
        <el-table-column label="发货数量" align="center" prop="num2"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="scope">
            {{ scope.row.num2 * scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.buyNum" :min="1" :max="scope.row.num"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm4">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open5" width="80%" append-to-body>
      <el-table v-loading="loading" :data="inordergoodslistList">
        <el-table-column label="订单编号" align="center" prop="orderCode"/>
        <el-table-column label="商品名称" align="center" prop="goodsName"/>
        <el-table-column label="商品规格" align="center" prop="specificationName"/>
        <el-table-column label="交货数量" align="center" prop="num2"/>
        <el-table-column label="总价" align="center">
          <template slot-scope="scope">
            {{ scope.row.num2 * scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.buyNum" :min="1" :max="scope.row.num"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm5">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import {
  changeGoodsStock,
  getInordergoodslist,
  getInorderlist, updateOrderStepToFive, updateOrderStepToFour, updateOrderStepToSix, updateOrderStepToSeven,
  updateOrderStepToThree,
  updateOrderStepToTwo
} from "@/api/member/inorderlist";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      queryParams: {},
      inorderlistOne: {},
      inordergoodslistList: [],
      active: 0,
      // 弹出层标题
      title: "",
      open1: false,
      open2: false,
      open3: false,
      open4: false,
      open5: false,
    };
  },
  created() {
    this.getList();
    this.changeStock();
  },
  computed: {},
  methods: {
    /** 查询销售单管理列表 */
    getList() {
      this.loading = true;
      const orderCode = this.$route.params && this.$route.params.orderCode;
      getInorderlist(orderCode).then(response => {
        console.log(response)
        this.inorderlistOne = response.data;
        if (response.data.orderStep == 1) {
          this.active = 0;
        }
        if (response.data.orderStep == 2) {
          this.active = 1;
        }
        if (response.data.orderStep == 3) {
          this.active = 3;
        }
        if (response.data.orderStep == 4) {
          this.active = 5;
        }
        if (response.data.orderStep == 5) {
          this.active = 7;
        }
        if (response.data.orderStep == 6) {
          this.active = 9;
        }
        if (response.data.orderStep == 7) {
          this.active = 11;
        }

      });
      getInordergoodslist(orderCode).then(response => {
        this.inordergoodslistList = response.rows;
        this.inordergoodslistList.forEach(item => {
          item.num = item.buyNum;
          item.num2 = item.buyNum;
        })
        this.loading = false;
      });
    },

    /** 开始配货*/
    StartStocking() {
      this.open1 = true;
      this.title = "配货中";
    },

    /** 开始验收*/
    Startcheck() {
      this.open2 = true;
      this.title = "验收中";
    },

    /** 开始装货*/
    Startloading() {
      this.open3 = true;
      this.title = "装货中";
    },
    /** 开始发货*/
    Startshipment() {
      this.open4 = true;
      this.title = "发货中";
    },

    /** 开始发货*/
    Startdeliver() {
      this.open5 = true;
      this.title = "交货中";
    },

    /** 退出路由*/
    quit() {
      this.$router.push("/member/inorderlist/index")
    },

    // 取消按钮
    cancel() {
      this.open1 = false;
      this.open2 = false;
      this.open3 = false;
      this.open4 = false;
      this.open5 = false;
    },

    submitForm1() {
      let flag = true;
      this.inordergoodslistList.forEach(item => {
        // console.log(item)
        if (item.buyNum < item.num) {
          flag = false;
          updateOrderStepToTwo(item.orderCode);
          this.$modal.msgWarning("配货未完成");
        }
      });
      if (flag) {
        updateOrderStepToThree(this.$route.params && this.$route.params.orderCode)
        this.$modal.msgSuccess("配货成功");
        this.next();
        this.next();
      }
      this.open1 = false;
    },

    submitForm2() {
      let flag = true;
      this.inordergoodslistList.forEach(item => {
        // console.log(item)
        if (item.buyNum < item.num) {
          flag = false;
          updateOrderStepToThree(item.orderCode);
          this.$modal.msgWarning("验货未完成");
        }
      });
      if (flag) {
        updateOrderStepToFour(this.$route.params && this.$route.params.orderCode)
        this.$modal.msgSuccess("验货成功");
        this.next();
        this.next();
      }
      this.open2 = false;
    },

    submitForm3() {
      let flag = true;
      this.inordergoodslistList.forEach(item => {
        // console.log(item)
        if (item.buyNum < item.num) {
          flag = false;
          updateOrderStepToFour(item.orderCode);
          this.$modal.msgWarning("装货未完成");
        }
      });
      if (flag) {
        updateOrderStepToFive(this.$route.params && this.$route.params.orderCode)
        this.$modal.msgSuccess("装货成功");
        this.next();
        this.next();
      }
      this.open3 = false;
    },

    submitForm4() {
      let flag = true;
      this.inordergoodslistList.forEach(item => {
        // console.log(item)
        if (item.buyNum < item.num) {
          flag = false;
          updateOrderStepToFive(item.orderCode);
          this.$modal.msgWarning("发货未完成");
        }
      });
      if (flag) {
        updateOrderStepToSix(this.$route.params && this.$route.params.orderCode)
        this.$modal.msgSuccess("发货成功");
        this.next();
        this.next();
      }
      this.open4 = false;
    },

    submitForm5() {
      let flag = true;
      this.inordergoodslistList.forEach(item => {
        // console.log(item)
        if (item.buyNum < item.num) {
          flag = false;
          updateOrderStepToSix(item.orderCode);
          this.$modal.msgWarning("交货未完成");
        }
      });
      if (flag) {
        updateOrderStepToSeven(this.$route.params && this.$route.params.orderCode)
        this.$modal.msgSuccess("交货成功");
        this.next();
        this.next();
      }
      this.open5 = false;
    },

    /** 修改库存*/
    changeStock() {
      // console.log(this.inordergoodslistList)
      this.inordergoodslistList.forEach(item => {
        // console.log(item)
        changeGoodsStock(item)
      })
    },

    nextTwo() {
      this.inordergoodslistList.forEach(item => {
        updateOrderStepToTwo(item.orderCode)
      })
      this.next();
    },

    next() {
      if (this.active++ > 10) {
        this.changeStock();
        this.active = 1;
      }
    }
  }
}
</script>
<style>
.bai,.yu{
  color: red;
}
</style>

